<template>
    <div class="category_tree_container" style="height: 100%">
        <slot name="title"></slot>
        <vAside ref="aside" :options="asideOptions" :treeOptions="defaultTreeOptions"
                :treeData="treeData" :isShowHeader="isDefaultShowHeader" :showShrink="showShrink"
                :defaultExpandedKeys="defaultExpandedKeys"
                :currentNodeKey="currentNodeKey"
                @event="handleAsideEvent" style="height: 100%">
            <template slot="button">
                <i class="ml5 el-icon-circle-plus-outline" v-if="!detail"
                   @click="handleType(null, null, 'add')"
                   v-permission="addPermission" />
                <el-tooltip class="item" effect="dark" content="全部" placement="top">
                    <i class="ml10 fa fa-list-ul" :style="listStyle"
                       @click="getAllTree"/>
                </el-tooltip>
            </template>
        </vAside>
    </div>
</template>

<script>
import provide from "@common/mixins/provide";
import CategoryForm from "../goods/dialog/CategoryForm";

export default {
    extends: provide,
    name: "CategoryTree",
    props: {
        options: {
            type: Object,
            default () {
                return {};
            }
        },
        treeOptions: {
            //树配置
            type: Object,
            default () {
                return {};
            },
        },
        title: {
            type: String,
            default: '物料类目管理',
        },
        width: {
            type: String,
            default: '300px',
        },
        detail: {
            type: Boolean,
            default: false,
        },
        showCheckbox: {
            type: Boolean,
            default: false,
        },
        showShrink: {
            type: Boolean,
            default: true,
        },
        defaultNodeKey: {
            type: [String, Number],
            default: null,
        },
    },
    data () {
        const _this = this;
        return {
            asideOptions: {
                width: "300px",
                title: "物料类目管理",
            },
            addPermission: {
                check_router: '/jxcBaseGoods',
                permission: 'jxc:goodsCategory:save',
            },
            defaultTreeOptions: {
                ref: "$categoryTree",
                highlightCurrent: true,
                defaultExpandAll: false,
                nodeKey: 'sid',
                showCheckbox: this.showCheckbox,
                props: {
                    label: "name",
                    children: "children",
                },
                iconField: 'icon_file_sid',
                buttons: [
                    {
                        icon: "el-icon-circle-plus-outline",
                        permission: {
                            check_router: '/jxcBaseGoods',
                            permission: 'jxc:goodsCategory:save',
                        },
                        filter(row) {
                            return row.sid !== '-1';
                        },
                        method: (data, $event) => {
                            _this.handleType(data, $event, "add");
                        },
                    },
                    {
                        icon: "fa fa-pencil",
                        permission: {
                            check_router: '/jxcBaseGoods',
                            permission: 'jxc:goodsCategory:save',
                        },
                        filter(row) {
                            return row.sid !== '-1';
                        },
                        method: (data, $event) => {
                            _this.handleType(data, $event, "edit");
                        },
                    },
                    {
                        icon: "fa fa-trash-o",
                        permission: {
                            check_router: '/jxcBaseGoods',
                            permission: 'jxc:goodsCategory:delete',
                        },
                        filter(row) {
                            return row.sid !== '-1';
                        },
                        method: (data, $event) => {
                            _this.handleType(data, $event, "del");
                        },
                    },
                ],
                isSearch: true,
                filterNode (value, data) {
                    if (!value) {
                        return true;
                    }
                    return data.name.indexOf(value) !== - 1;
                },
            },
            treeData: [],
            defaultExpandedKeys: [],
            currentNodeKey: null,
            treeNodeKey: {},
            isDefaultShowHeader: true,
        }
    },
    computed: {
        listStyle () {
            let style = {};
            if (this.$utils.isNotEmptyList(this.treeData) && !this.$utils.isNotEmpty(this.treeNodeKey.sid)) {
                style.color = '#409EFF';
            }
            if (this.defaultNodeKey) {
                delete style.color;
            }
            return style;
        },
    },
    mounted () {
        this.initTreeData();
        this.initTreeOptions();
        this.initOptions();
    },
    methods: {
        initTreeOptions () {
            this.defaultTreeOptions = $.extend({}, this.defaultTreeOptions, this.treeOptions);
            if (this.detail) {
                this.defaultTreeOptions = $.extend({}, this.defaultTreeOptions, {
                    buttons: [],
                });
            }
        },
        initOptions () {
            this.asideOptions = $.extend({}, this.asideOptions, {
                title: this.title,
                width: this.width,
            }, this.options);
        },
        handleAsideEvent (event) {
            const _this = this;
            _this.defaultExpandedKeys = [event.data.id];
            if (event.type === "nodeClick") {
                _this.treeNodeKey = event.data;
            }
            _this.$emit("event", event);
        },
        getAllTree () {
            const _this = this;
            _this.defaultExpandedKeys = [];
            _this.treeNodeKey = {};
            _this.$categoryTree && _this.$categoryTree.setCurrentKey(null);
            _this.initTreeData();
            _this.$emit("event", {
                type: 'all',
            });
        },
        handleType (data, event, type) {
            const _this = this;
            if (event) {
                event.stopPropagation();
            }
            if (type === 'del') {
                _this.handleDeleteConfirm(data);
                return;
            }
            let title = type === 'add' ? '新增物料类目信息' : type === 'edit' ? '编辑物料类目信息' : '物料类目信息详情';
            if (type === 'add') {
                if (data === null && this.treeNodeKey && this.treeNodeKey.sid !== '-1') {
                    data = this.treeNodeKey;
                }
                data = {
                    sid: type === 'edit' ? data.sid : null,
                    parent_sid: data ? data.sid : 'root',
                };
            }
            _this.$dialog({
                title,
                width: '620px',
                component: {
                    value: CategoryForm,
                    props: {
                        row: data,
                        treeData: _this.treeData,
                    },
                },
                confirmed() {
                    _this.refreshTree();
                },
            });
        },
        initTreeData () {
            let _this = this;
            return _this.fetchData(_this.$api.API_FindJxcCategoryTree).then(result => {
                _this.treeData = result.data || [];
                if (_this.defaultNodeKey) {
                    _this.$nextTick(() => {
                        if (_this.$categoryTree) {
                            _this.$categoryTree.setCurrentKey(_this.defaultNodeKey);
                        }
                    });
                }
            }).catch((error) => {
                _this.$message.error(error.message);
            });
        },
        refreshTree () {
            const _this = this;
            _this.initTreeData().then(() => {
                _this.defaultExpandedKeys = [];
                _this.currentNodeKey = null;
                if (_this.$utils.isNotEmpty(_this.treeNodeKey.sid)) {
                    _this.defaultExpandedKeys.push(_this.treeNodeKey.sid);
                    _this.currentNodeKey = _this.treeNodeKey.sid;
                }
                _this.$nextTick(() => {
                    if (_this.$categoryTree) {
                        let currentKey = _this.$utils.isNotEmpty(_this.treeNodeKey.sid) ? _this.treeNodeKey.sid : null;
                        if (this.defaultNodeKey) {
                            currentKey = this.defaultNodeKey;
                        }
                        _this.$categoryTree.setCurrentKey(currentKey);
                    }
                });
            });
            _this.$emit('event', {
                type: 'refresh',
                data: _this.treeNodeKey,
            });
        },
        handleDeleteConfirm (data) {
            const _this = this;
            let sids = [data.sid];
            _this.$confirm("是否继续删除", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                _this.fetchData(_this.$api.API_DeleteJxcCategorys, {
                    sids
                }).then(() => {
                    _this.$message.success("删除成功！");
                    _this.refreshTree();
                }).catch(() => {
                });
            }).catch(() => {
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.category_tree_container {
    height: 100%;

    /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        background-color: #409EFF;
        color: #FFFFFF;
    }
}
</style>
